import { useSelector } from 'react-redux'
import './index.scss'

const Count = ({ onPlus, onMinus, count, foodsId}) => {
  const { cartList } = useSelector(state => state.foods)
  let item = cartList.find(item => item.id === foodsId)
  const isAddCart = item ? true : false
  if (!isAddCart) item = { count: 0 }

  return (
    <div className="goods-count">
      {isAddCart && <span className="minus" onClick={onMinus}>-</span>}
      {isAddCart && <span className="count">{item.count}</span>}
      <span className="plus" onClick={onPlus}>+</span>
    </div>
  )
}

export default Count
